<template>
	<view class="myAdvise">
		<!-- 意见反馈页 -->
		<input 
		type="text"
		placeholder="点击输入反馈的标题/类型" 
		v-model="title"
		>
		
		<textarea 
		v-model="content" 
		@input="judgeLength" 
		maxlength="150" 
		placeholder="点击输入反馈的内容，字数限制在 150 字以内"
		></textarea>
		<view class="tip">{{content.length}}/150</view>
		
		<button
		type="primary"
		:disabled="content!=''? false:true"
		@click="submit"
		>提 交</button>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				title:"",
				content:""
			};
		},
		methods:{
			// 判断字数是否超出
			judgeLength(){
				if(this.content.length==150){
					uni.showToast({
						title:"字数不可超过150个！",
						icon:"none"
					})
				}
			},
			// 提交反馈
			submit(){
				http({
					url: "/prod-api/api/common/feedback",
					method:"POST",
					data:{
						title:this.title,
						content:this.content
					}
				}).then(res=>{
					console.log(res)
					if(res.data.code==200){
						uni.showToast({
							title:"感谢反馈！"
						})
						this.content=""
						this.title=""
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.myAdvise{
	padding: 20rpx 40rpx;
	input,
	textarea{
		margin: 20rpx 0;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
	}
	textarea{
		box-sizing: border-box;
		width: 670rpx;
		margin-bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
	}
	.tip{
		box-sizing: border-box;
		width: 670rpx;
		background-color: #f8f8f8;
		text-align: right;
		padding: 10rpx 20rpx;
		border-radius:0 0 20rpx 20rpx;
		color: #808080;
		font-size: 36rpx;
	}
	button{
		margin-top: 40rpx;
		border-radius: 20rpx;
	}
	button::after{
		border: 0;
	}
}
</style>
